<template>
  <div class="designateCompany">
    <div class="flex-between">
      <div class="title">指定公司发布</div>
      <a-switch
        v-model="designateCompanySwitch"
        @change="designateCompanyChange"
      />
    </div>
    <div class="tip">开启后，只有指定公司才可以看到该信息。</div>
    <c-collapse>
      <c-form
        :data="formData"
        :rules="formRules"
        ref="form"
        v-model="companysForm"
        :col="{
          labelCol: { style: 'width: 100px' }
        }"
        v-if="designateCompanySwitch"
      >
        <template v-slot:companys>
          <a-select
            v-model="companysForm.companys"
            label-in-value
            mode="multiple"
            :allowClear="true"
            :maxTagCount="6"
            placeholder="请输入指定公司"
            :filter-option="false"
            :not-found-content="fetchingCustomers ? undefined : null"
            @search="fetchCustomers"
            @change="handleChange"
          >
            <a-spin
              v-if="fetchingCustomers"
              slot="notFoundContent"
              size="small"
            />
            <a-select-option
              v-for="item in customers.pageData"
              :key="item.companyId"
              >{{ item.companyName }}</a-select-option
            >
          </a-select>
        </template>
      </c-form>
    </c-collapse>
  </div>
</template>

<script>
import { getcustomerbyname } from "@/api/company";
import collapse from "@/util/transition/collapse";
import { debounce } from "@/util/common";

export default {
  components: {
    cCollapse: collapse
  },
  props: {
    value: {
      type: Object,
      default: () => {
        return {};
      }
    },
    // 编辑时的报价详情
    updateQuotationDetail: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      designateCompanySwitch: false, // 指定公司开关
      formData: [
        {
          label: "指定公司",
          prop: "companys",
          slot: "companys"
        }
      ],
      formRules: {
        companys: [
          { required: true, message: "请选择指定公司", trigger: "change" }
        ]
      },
      customers: {
        // 指定公司相关数据
        searchKey: undefined,
        pageData: [],
        total: 0
      },
      fetchingCustomers: false // 是否正在查询公司
    };
  },
  computed: {
    companysForm: {
      get() {
        return this.value;
      },
      set(n) {
        this.$emit("input", n);
      }
    }
  },
  methods: {
    // 切换开关状态
    changeSwitch(val) {
      this.designateCompanySwitch = val;
    },
    designateCompanyChange(val) {
      this.$emit("change", val);
    },
    // 查询客户公司列表
    fetchCustomers: debounce(function(val) {
      if (val) {
        this.fetchingCustomers = true;
        this.customers.pageData = [];
        getcustomerbyname({
          customerName: val
        })
          .then(res => {
            this.customers.pageData = res;
          })
          .finally(() => {
            this.fetchingCustomers = false;
          });
      }
    }),
    // 选择后情况下拉选项
    handleChange() {
      // this.customers.pageData = [];
    },
    // 加载更多客户公司
    loadmoreCustomer() {
      this.customersPageNum++;
      this.getCustomerList();
    },
    // 校验商品信息是否填写正确
    checkout() {
      let _this = this;
      return new Promise(resolve => {
        if (this.designateCompanySwitch) {
          _this.$refs.form.validated().then(() => {
            resolve();
          });
        } else {
          resolve();
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.designateCompany {
  .title {
    font-weight: bold;
    font-size: 16px;
  }
  .tip {
    margin-top: 6px;
    color: rgba(0, 0, 0, 0.45);
    font-weight: bolder;
  }
}
</style>
